import React from 'react';
import './-page.scss';
import {observable, observer, action} from 'mobx.collection';
import {formatClassList} from "auxiliaries/extends/format";
import {notify, loading, loaded} from 'components/state/toast';
import {getRandomString} from "auxiliaries/extends/random";
import VideoController from "api/video";
import {REQUEST_STATE} from "fetchState";
import Delay from "delay";

@observer
class VideoCommercial extends React.Component {
    #ID = 'VIDEO-COMMERCIAL-' + getRandomString(16);

    @observable canPlay = false;
    @observable playState = false;

    componentDidMount() {
        if (this.props.onInitCheck?.() === true) {
            if (this.props.id !== null && !isNaN(this.props.id)) {
                this.getVideoState();
            }
        }
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.onInitCheck?.() === true) {
            if (this.props.id !== null && !isNaN(nextProps.id)) {
                this.getVideoState();
            }
        }
    }

    async getVideoState(props = this.props) {
        if (this.LoadState) {
            return this.LoadState;
        }
        this.LoadState = VideoController.GetVideoSign(props.id);
        this.isLoaded = false;
        let {CODE, DATA, STATUS, MESSAGE, DETAILS} = await this.LoadState;
        if (CODE === REQUEST_STATE.CANCEL) {
            return;
        }
        if (STATUS === 0) {
            this.isLoaded = true;
            const config = {
                fileID: DATA.FileId,
                appID: DATA.AppId,
                t: DATA.Expire,
                us: DATA.RandStr,
                sign: DATA.Sign,
                rlimit: DATA.IPLimit,
            };
            this.player = window.TCPlayer(this.#ID, config);
        } else {
            notify(DETAILS || MESSAGE);
        }
    }

    onSetPlayState(bool) {
        this.playState = bool;
    }

    @action
    async onPlay(e) {
        e.stopPropagation();
        if (!this.canPlay) {
            let result = await this.props?.onPayCheck?.();

            if (result === false || isNaN(+this.props.id)) {
                return;
            }
            await this.getVideoState();
        }

        if (!this.isLoaded && this.LoadState) {
            loading('正在初始化播放器');
            await this.LoadState;
            await Delay(500);
            loaded();
        }

        if (!this.playState) {
            this.playState = true;
            this.player.play();
        }
    }

    @action
    onPauseVideo() {
        if (this.playState) {
            this.playState = false;
            this.player.pause();
        }
    }

    componentWillUnmount() {
        this.setState = function () {

        };
    }

    render() {
        let {
            className,
            url,
            id,
            // onPayCheck,
            cover,
            needPay,
        } = this.props;
        let isFree = !needPay;
        let classList = formatClassList(className);

        return (
            <div className={[
                "--video-commercial"
            ].concat(classList).join(' ')}
                 style={cover ? {
                     backgroundImage: `url('${cover}')`
                 } : null}
                 onClick={() => this.onPauseVideo()}>
                {
                    this.canPlay || url || !isNaN(+id) ?
                        <video id={this.#ID}
                               width="414"
                               height="270"
                               preload="auto"
                               playsInline
                               webkit-playsinline="true">
                        </video>
                        :
                        null
                }
                <div className={"play touch-active" + (this.playState ? ' off' : '')}
                     onClick={(e) => this.onPlay(e)}>
                    <div className="play-btn"/>
                </div>
                {
                    //未支付和未播放
                    !this.playState ? (
                        <div className={"view-state font-size-26"}>
                            {!isFree ? '付费观看' : '免费观看'}
                        </div>
                    ) : null
                }
            </div>
        );
    }
}

export default VideoCommercial;